Introduction to SMIL 


Casey Lai 
System Engineer 


real 


SMIL 


Synchronized Multimedia Integration 


Language 

A powerful markup language 
Timing Control 

Layout Control 


Synchronize RealVideo, RealAudio, 
RealPix, Flash & JPEG 


real 


Advantage of SMIL 


Multi Language 

m Language detection 
m Switching Logic 
Multi Bandwidth 

m Bandwidth detection 
m Switching Logic 
Multi Location 

m Open container 


real 


Serving SMIL 


m Serve by RealServer 
m Link your Web page 


real 


SMIL General Rules 


m Starts with <smil> & Ends with </smil> 
m - Body Section is Required 


m - Header Section is Optional 
<smil> 
<head> 
... optional... 
</head> 
<body> 
required body... 
</body> 
</smil> 


real 


SMIL General Rules 


m Tags Must be Closed with a Forward 
Slash or Closing Tag. 


= Attribute Values Enclosed in Double 
Quotation Marks 


<audio src="first.rm"/> 


m HTML-Style Comments Allowed 
<!-- This is a comment --> 


real 


SMIL General Rules 


m Lowercase Text for Tags and 
Attributes 


m SMIL Files Use the Extension .smil 
or .smi 


m indentation Recommended 


real 


Timing Control in SMIL 


m Sequential 
m Parallel 
m Mixing 


real 


Playing Clip in Seguence 


<smil> 


<seg> 
<audio src="audio/newsong.rm"/> 
<audio src="audio/oldsong.rm"/> 
</seg> 


<smil> 


real 


Playing Clip in Parallel 


<smil> 


<par> 
«audio src=""music/newsong.rm''/> 
<textstream src="lyrics/newsong.rt"'/> 
</par> > 


<smil> 


real 


Data type 


Animation, Flash file (.swf). 
Audio, RealAudio (.rm) 
Video, Real Video (.rm) 


Img, JPEG (.jpg), GIF images (.gif), or 
PNG images (.png). 


real 


Data Type 


m ref, all type including any clip type not 
covered by other attributes, such as a 


RealPix file (.rp) 
Static text clips (.txt) 
Streaming RealText clips (.rt) 


real 


URL Path 


<head> 
<meta name="base" 
content="rtsp://realserver.example.com/"/> 


</head> 


<body> 
<audio src="audio/first.rm"/> 


</body> 


rtsp://realserver.example.com/audio/first.rm 


real 


URL Path 


m HTTP URL 
<img 
src="http://www.example.com/images/logo.gif 
“J> 


m Directory notation such as "../" are also 
acceptable 


real 


Local Path 


= src="audio/first.rm"' 


one level below the SMIL file in the audio 
directory. 


m Absolute local links to specify exact 
locations. 


src=file:// c audio Wirst.rm 
Absolute Path is OS dependent 


real 


Ending a on a Specific Clip 


Pararallel Group 
m _ «par endsync-''first''> 


</par> 


m stop the <par> group when the clip with 
the shortest timeline ends playback 


real 


Ending a on a Specific Clip 


Pararallel Group 
m <par endsync—“last'> 


</par> 


m stop the <par> group to conclude when all 
clips have finished playing. (default) 


real 


Ending a on a Specific Clip 


m <parendsync="id (vid) "> 
<video id="vid" 
src=" videos/newsong.rm"' region=''video''/> 
<textstream src—''lyrics/newsong.rt'' 
region="'text"'/> 
</par> 


m stop the <par> group to conclude when the 
clips “vid” has finished playing. 


real 


Putting <seg> 8 <par> together 


<seg> 

clip I 

<par> Example 1 

clip 2 1 

clip 3 

</par> 
clip 4 

</seg> 








‘real 


Putting <seg> 8 <par> 
together 


<par> 
clip I 
<seg> 
clip 2 
clip 3 
</seg> 
clip 4 
</par> 








‚real 


Specifying Time 


m hh:mm:ss. xy format. 
hh is hours 
mm is minutes 
ss is seconds 
xy is hundredth of a second. 


begin="02:34:00" = 2 hours, 34 minutes 
begin="02:34" = 2 minutes, 34 seconds 


real 


Shorthand for time 


Timing Marker 


Specifies 


Example 


Example 
Value 





Hour 


2.5h 


2 hours, 30 
minutes 





Minute 


Second 


2.75min 


2 minutes, 45 
seconds 


15 seconds, 
550 
milliseconds 








1/1000 
sec 





670.2ms 





670.2 
milliseconds 





real 


Setting Duration 


m The dur attribute controls how long a 
clip or group stays active after it starts 
to play back. 


<video src="videos/newsong.rm" 
begin="20.5s" end="62.7s"/> 


<video src-'videos/newsong.rm” 
begin="20.5s" dur="42.2s"/> 


real 


Setting a Fill 


= Determines what happens to the clip 
immediately after it plays to its normal 
end point 
fill=" remove“ 
fill="freeze" 


<video src="videos/newsong.rm" dur="30s" 
fill="freeze"/> 


m no effect on audio 


real 


Timing Example 


m «par» 
<audio src="song1.rm“ clip- 
begin="30.4s" dur="30s"/> 
<audio src="song2.rm" begin="28s" clip- 
begin="2.4s"clip-end="13.7s"/> 
</par> 


real 


Answer 


Answer: Total Time = 39.3 seconds 
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Repeat Playing 


m <video src= "videos/newsong.rm“ 
repeat="4"/> 


m <video src=" videos/newsong.rm“ 
repeat="4" end="3.5min" fill="freeze"/> 


newsong.rm = 3min 


real 


Repeating Indefinately 


m <audio src= music/newsong.rm“ 
end="1.5min" repeat="indefinite"/> 


newsong.rm = 30 sec 


Repeated for 3 times 
le. Background Music 


real 


Layout 


m Displays several clips at a time. 
1. Put «layout» and </layout> tags. 
2. Define a root-layout region (overall size) 
3. Define a sub region 


real 


Layout example 


<smil> 
<head> 
<layout> 
<root-layout … overall window size... l> 
<region id="nameT location... J>. 


<ref src="..." region=" name Tk assigns a 
clip to a region by namey, 1> 
</body> 


</smil> 





Root Layout 


<head> 


<layout> 
«root-layout width=“600" height="600"/> 
</layout> 
</head> 


real 


Playback Region 


Attribute | Sets 


Pixel 
Example 


Percentage 
Example 





offset from top of 
root-layout 


offset from left side 
of root-layout 


region width 


top="60" 
left="120" 


width="240" 


top="10%" 
left="20%" 


width="40%" 





region height 





height="180" 





height="30%" 





real 


Layout Example 





Layout Example 2 


<head> 
<layout> 
<root-layout background- 
color="maroon" width= 250" 
height="230"/> 
<region id="videoregion: top=zsx 
left="5" width="240" heighi= 180//> 
<region id="textregion" top=s200% 
left="5" width="240" height=207/> 
</layout> 
</head> 





Exampl 


M 





Color Table 


weal (3006080) navy 18000090) 





Transparent 
1. background color. 
2. not visible until a clip starts to play in it. 





Defining How Clips Fit Regions 


m Fill 
Resize with disortion 
m Hidden (default) 
Origanal size with possible cropping 
m Meet 
Resize with no cropping 
= Slice 
Resize with possible cropping 
m Scroll 


real 





Fill Hidden 


mr 
m PIP 








Z-index 


<layout> 
<root-layout background-color="gray" 
width="280" height="220"/> 
<region id="image" top="10" left="10" 
width="260" height="200" z- 
index="0"/> 
<region id="video" top="20" [3] 52072 UE 
width="240" height="180" z- 
index="1"/> 

</layout> 


Z-index 0 = background 





Z-index Example 





real 


Assigning Clips to region 


<smil> 
<head> 
<layout> 
<root-layout background-color="maroon" 
width="250" height="230"/> 
<region id="videoregion” top="5" left="5" 
width="240" height="180"/> 
</layout> 
</head> 
<body> 
<par> 
<video src="video.rm" region="videoregion'/> 
<audio src="audio.rm"/> 
</par> 
</body> 


</smil> real 


Company Press Release 

Polar Bear Airlines to Lease 717 Jet 
DENVER Business Aire -Aug 12, 1998: 
“Denwer-bunord Polar Bear Airlines 
(Masdag-Pllr - news) today announced an 
agneerment rà hit A 737-200 jet Fram 


Interjet Anathon Investor. LLC, Northfield, 


| Nasdag 1825.26 +32.56 (+1.82%) SAP 500 1082.84 








real 


Answer 


<head> 
<!--presentation with 2 text clips and 1 video clip--> 
<meta name="title" content="News of the Week"/> 
<layout> 
<root-layout width="430" height="165"/> 
<region id="newsregion" top="0" left="0" 
width="250" height="144"/> 
<region id="videoregion" top="0" 
left="250"width="180" height="144"/> 
<region id="stockregion" top="145" 
left="0"width="430" height="20"/> 
</layout> 


</head> 


real 


Answer (Part 2) 


<body> 
<par> 
<!--play these 3 clips simultaneously--> 
<textstream src="news.rt" region="newsregion"/> 
<video src="newsvid.rm" region="videoregion"/> 
<textstream src="stocks.rt" region="stockregion"/> 
</par> 


</body> 


real 


Switching 


<switch> 
<choice7 test-attribute="value1']> 
<choice2 test-attribute="value2"7> 


</switch> 


real 


Switching 


m Language Switching 


<par> 
<ref src="slides/seattle.rp"/> 
<switch> 
<audio src=“chinese/seattle.rm" system- 
anguage="zh-cn"/> 
<audio src=“english/seattle.rm" system- 
language="en"/> 
</switch> 
</par> 


real 


Switching 


= Bandwidth Switching 


<par> 
<switch> 

<ref src="pix/slides1.rp" system-bitrate="80000"/> 

<ref src="pix/slides2.rp" system-bitrate="20000"/> 
</switch> 


</par> 


real 


Linking to Other Media 


<a ref="http://www.example.com/index.htm" 
show="new'> 
<video src="video.rm" region="videoregion"/> 


</a> 


m show="replace“, same windows 
m show="new", browser 
m show="pause“, pause, browser 


real 


Defining Hot Spot 


<video src="video.rm" region="videoregion"> 
<anchor href=“/video/r1.rm" 
coords="25%,25%,75%,75%"/> 


</video> 


<video src="video.rm" region="videoregion"> 
<anchor href=“/video/r1.rm" 
coords-“30,80,100,100"/> 


</video> 


real 


Time limited hot spot 


<video src="video.rm" region="videoregion"> 
<anchor href=“/video2.rm" begin="0s" end="5s"/> 
<anchor href=“/video3.rm" begin="5s" end="8s"/> 


</video> 


real 


Linkage 


<par id="text and video"> 
<video src="video2.rm" region="newsregion"/> 
<textstream src="text.rt" region="textregion"/> 


</par> 


<a href=“/newmedia.smilžtext and video"> 
<video src="video.rm" region="videoregion'/> 
</a> 
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Information 


<head> 
«meta name="title" content="Bob and Susan 
Discuss Streaming Media"/> 
<meta name="author" content="RealNetworks 
Media Productions"/> 
<meta name="copyright" content="©1998 
RealNetworks"/> 
<meta name="abstract" content="Bob and Susan, 
two Internet technology. experts, discuss the 
future of streaming media."/> 


</head> 


real 


Playlist 


<seg> 
<video src="clip1.rm" title="Bob Expounds his 
View"/> 
«video src-"clip2.rm" title="Susan Responds 
with Another Perspective"/> 
«video src-"clip3.rm" title="Summary: A Look 
at the Future"/> 


</seg> 


real 


PlayList 


Playlist: 


Už a ith Another Perzpectiv 
Summary: A Look at the Future 





real 


